<template>
  <a-modal  :maskClosable="false"
            title="章节编辑"
            :width="1000"
            @ok="updateData()"
            v-model="mdl.visible"
            :confirm-loading="loading"
  >
    <div class="dynamic-wrap" :style="{ maxHeight: wrapHeight + 'px' }">
      <div v-for="(item,index) in courseChapterList" :key="index">
        <a-row :gutter="24">
          <!--删除-->
          <a-col :span="1" style="padding-left: 0; padding-right:0">
            <a-form-item :labelCol="{span: 0}" :wrapperCol="{span: 24}">
              <template v-if="courseChapterList.length > 1">
                <a-button type="dashed" icon="minus" @click="removeRow(index)" class="minusRowBtn"></a-button>
              </template>
            </a-form-item>
          </a-col>
          <!--章节名称-->
          <a-col :span="6" style="padding-right: 0">
            <a-form-item label="章节名称" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
              <a-input
                placeholder="请填写章节名称"
                v-model="item.chapterName"
              />
            </a-form-item>
          </a-col>
          <!--章节讲师-->
          <a-col :span="5" style="padding: 0">
            <a-form-item label="章节讲师" :labelCol="{span: 11}" :wrapperCol="{span: 13}">
              <a-input
                placeholder="请填写讲师姓名"
                v-model="item.chapterTeacherName"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4" style="padding-right: 0">
            <a-form-item label="学时" :labelCol="{span: 6}" :wrapperCol="{span: 1}">
              <a-input-number v-model="item.period" :min="1"/>
            </a-form-item>
          </a-col>
          <!--章节视频-->
          <a-col :span="7" style="padding-left: 0;" @click="indexs=index">
            <a-form-item label="章节视频" :labelCol="{span: 6}" :wrapperCol="{span: 15}">
              <videoCom @getVideoFile="getVideoFile" :msg="item.chapterFileName" :key="index" :id="item.fileId"></videoCom>
            </a-form-item>
          </a-col>
        </a-row>
      </div>
      <a-button type="dashed" icon="plus" @click="addRow" class="addRowBtn">
        新增章节
      </a-button>
    </div>
  </a-modal>
</template>

<script>
/* eslint-disable */
import {courseedit,couresup} from '@/api/courseManage/courseManage'
import videoCom from '@/components/videoCom'
import {uploadVideo,livedelFile} from '@/api/courseManage/live'
  export default {
    components: {
      videoCom
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      wrapHeight: { // 表单容器的高度
        type: Number,
        default: 120
      },
      arr: {
        type: Array,
        default: function() {
          return []
        }
      },
      clickBtn: {
        type: Boolean
      },
      mdl:[Array,Object]
    },
    data() {
      return {
          list: {},
        chapterArr: {
          "chapterFileName": "",//章节视频名称
          "chapterFilePath": "",//章节视频路径
          "chapterFilePeriod": "",//章节视频时长
          "chapterName": "",//章节名称
          "chapterTeacherName": "",//章节讲师名称
          "fileId": "",//视频文件ID
          "id": '',
          period: ''
        },
        courseChapterList: [],
        loading: false,
        indexs: ''
      }
    },
    watch: {
      visible(value) {
        if(value) {
          if(this.mdl.id != null && this.mdl.id != '') {
            this.getChapterList()
          }
        }

      }
    },
    computed: {
      visible() {
        return this.mdl.visible
      }
    },
    inject: ['upShow'],
    created() {

    },
    mounted() {

    },
    methods: {
//        获取章节
      getChapterList() {
        this.loading = true
        this.courseChapterList = []
        courseedit(this.mdl.id).then(res=> {
            if(res.code == 200) {
              this.loading = false
              if(res.data.chapterFileId != '' && res.data.chapterFileId != null) {
                var chapterFileIdArr = res.data.chapterFileId.split(',')
                for(var i=0;i<chapterFileIdArr.length;i++) {
                  var chapterArr = {
                    chapterFileName: res.data.chapterFileName.split(',')[i],//章节视频名称
                    chapterName: res.data.chapterName.split(',')[i],//章节名称
                    chapterTeacherName: res.data.chapterTeacherName.split(',')[i],//章节讲师名称
                    period: res.data.chapterPeriod.split(',')[i],//章节学时
                    fileId: chapterFileIdArr[i],//视频文件ID
                    id: res.data.chapterId.split(',')[i],
                    chapterFilePath: '',
                    chapterFilePeriod: ''
                  }
                  this.courseChapterList.push(chapterArr)
                }
                this.upShow(1,"获取章节成功")
                this.list = res.data
              }else {
                this.list = res.data
                this.upShow(2,"暂无章节")
              }
            }else {
              this.loading = false
              this.upShow(2,"获取章节失败")
            }
        }).catch(err => {
          console.log(this.upShow(2,"获取章节失败"))
        })
      },
      // 移除某行
      removeRow(k) {
//        删除已上传视频
        if(this.courseChapterList[k].fileId != '') {
          livedelFile(this.courseChapterList[k].fileId).then(res => {
            if(res.code == 200) {
              var arr = []
              for(var i=0;i<this.courseChapterList.length;i++) {
                if(i!=k) {
                  arr.push(this.courseChapterList[i])
                }
              }
              this.courseChapterList = arr
            }else {
              this.upShow(2,'删除失败')
            }
          }).catch()
        }else {
          var arr = []
          for(var i=0;i<this.courseChapterList.length;i++) {
            if(i!=k) {
              arr.push(this.courseChapterList[i])
            }
          }
          this.courseChapterList = arr
        }
      },
      // 新增一行
      addRow() {
          let chapterArr={
            "chapterFileName": "",//章节视频名称
              "chapterFilePath": "",//章节视频路径
              "chapterFilePeriod": "",//章节视频时长
              "chapterName": "",//章节名称
              "chapterTeacherName": "",//章节讲师名称
              "fileId": "",//视频文件ID
              "id": '',
            period: ''
          }
        this.courseChapterList.push(chapterArr)
      },
//      获取上传视频数据
      getVideoFile(val) {
          if(val == '') {
            this.courseChapterList[this.indexs].chapterFileName = val;
            this.courseChapterList[this.indexs].fileId = val;
            this.courseChapterList[this.indexs].chapterFilePath = val;
            this.courseChapterList[this.indexs].chapterFilePeriod = val;
          }else {
            this.courseChapterList[this.indexs].chapterFileName = val.fileName;
            this.courseChapterList[this.indexs].fileId = val.fileNo;
            this.courseChapterList[this.indexs].chapterFilePath = val.fileUrl;
            this.courseChapterList[this.indexs].chapterFilePeriod = val.filePeriod;
            if(this.courseChapterList[this.indexs].chapterName == '') {
              this.courseChapterList[this.indexs].chapterName = val.fileName;
            }
          }
          this.indexs = ''
      },
//      编辑
      updateData() {
        var breaks = false
        if(this.courseChapterList.length == 0) {
          this.upShow(2, '请上传章节')
        }else {
          var period = 0
          this.courseChapterList.forEach(e=> {
              if(breaks == false) {
                if(e.fileId == '' || e.fileId == null ||
                  e.chapterName == '' || e.chapterName == null ||
                  e.chapterTeacherName == '' || e.chapterTeacherName == null ||
                  e.period == '' || e.period == null) {
                  this.upShow(2, '章节内容不能为空')
                  breaks = true
                }else {
                  period = period + e.period
                }
              }
          })
        }
        if(breaks == false) {
          this.loading = true
          if(this.list.docId!=null&&this.list.docId!='') {
            this.list.infoDocIList=[]
            this.list.docId.split(',').forEach(item => this.list.infoDocIList.push({
              id:item
            }));
          }
          var params = {
//          courseInfo: this.list.courseInfo,
            courseName: this.list.courseName,
            courseType: this.list.courseTypeId,
//          fileNo: this.list.fileNo,
            id: this.list.id,
            period: period,
//          integral: this.list.integral,
//          uploadTime: this.list.uploadTime,
            infoDocIList: this.list.infoDocIList || [],
            courseChapterList: this.courseChapterList
          }
          couresup(params).then(res => {
            if (res.code === 200) {
              this.loading = false
              this.upShow(1, "成功")
              this.mdl.visible = false
              this.$emit('handleSearch')
            } else {
              this.loading = false
              this.upShow(2, res.msg)
            }
          }).catch(err => {
            this.loading = false
            this.upShow(2)
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .dynamic-wrap {
    padding-left: 20px;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 7px;
    }
    &::-webkit-scrollbar-thumb {
      background: #d8d8d8;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }
    /deep/ .btnUp {
      top: -11px!important;
    }
  }
  .minusRowBtn {
    color: #f5222d;
    background: #fff1f0;
    border-color: #ffa39e;
    padding-right: 7px;
    padding-left: 7px;
    height: 29px;
    margin-left: 10px;
  }
  .addRowBtn {
    width: 76%;
    color: #1890ff;
    border-color: #91d5ff;
    margin: 0px 0px 20px 70px;
  }
</style>